/**
 * Created by Alex on 2014/7/11.version 1.0
 */
;
(function ($) {
    $.fn.areapicker = function (opts) {
        //extend defaults
        var options = $.extend({}, $.fn.areapicker.defaults, opts);
        //
        return $(this).each(function () {
            var offsetLeft = $(this).offsetLeft;
            var offsetTop = $(this).offsetTop;
            var container = $('<div class="areapicker"></div>');
            container.css({'top': offsetTop, 'left': offsetLeft, 'height': 'auto', 'width': options.width});
            //title
            var title = $('<div class="ui-widget-header ui-corner-all"><div class="title">' + options.title + '</div></div>');
            container.append(title);
            //select all checkbox
            var selectAll = $('<div class="selectAll"><input type="checkbox"> <span>全选</span> </div>');
            container.append(selectAll);
            //data
            var li = [];
            /*
             for (var key in options.data) {
             if (options.data[key].length > options.maxChar) {
             li.push('<li><input type="checkbox" value=\"' + key + '\"/><span title="' + options.data[key] + '">' + options.data[key] + '</span></li>');
             } else {
             li.push('<li><input type="checkbox" value=\"' + key + '\"/><span>' + options.data[key] + '</span></li>');
             }
             }*/
            $.each(options.data, function (idx, val) {
                if (val["value"].length > options.maxChar) li.push('<li><input type="checkbox" value=\"' + val["key"] + '\"' + val["checked"] + '/><span title="' + val["value"] + '">' + val["value"] + '</span></li>');
                else li.push('<li><input type="checkbox" value=\"' + val["key"] + '\"' + val["checked"] + '/><span>' + val["value"] + '</span></li>');
            });
            container.append($('<ul style="height:' + options.height + 'px"></ul>').append(li.join("")));
            //container.append($('<div class="ui-widget-footer"><button class="ui-button close">确定</button></div>'));
            container.insertAfter($(this));
            //insert hidden input
            var hiddenInput = $('<input class="areapicker-hidden" name=\"' + $(this).attr('name') + '\" type="hidden" value="" />');
            $(this).attr('name', $(this).attr('name') + '_old');
            hiddenInput.insertAfter($(this));
            //binding click for select all checkbox
            selectAll.find('input').on('click', function () {
                var all = container.children('ul').find('input');
                var unchecked = container.children('ul').find('input:not(:checked)');
                var checked = container.children('ul').find('input:checked');
                if ($(this)[0].checked) {
                    unchecked.each(function () {
                        this.checked = true;
                    });
                    all.attr('disabled', true);
                    selectAll.find('span').text('取消全选')
                }
                else {
                    all.each(function () {
                        this.checked = false;
                    });
                    all.attr('disabled', false);
                    selectAll.find('span').text('全选')
                }
            });
            $(this).on('click', function (e) {
                e.stopPropagation();
                $('.areapicker').hide();
                container.fadeIn(200);
            });
            container.on('click', function (e) {
                e.stopPropagation();
            });
            $(document).on('click', function (e) {
                container.fadeOut(200, function () {
                    var checked = container.children('ul').find('input:checked');
                    $(this).siblings('[type=text]').val('');
                    if (checked.length > 0) {
                        var str2 = '';
                        var val2 = '';
                        for (var i = 0; i < checked.length; i++) {
                            if (i == checked.length - 1) {
                                str2 += checked.eq(i).next().text();
                                val2 += checked.eq(i).val();
                                break;
                            }
                            else {
                                str2 += checked.eq(i).next().text() + ' ';
                                val2 += checked.eq(i).val() + ' '
                            }
                        }
                        $(this).siblings('[type=text]').val(str2);
                        $('.areapicker-hidden').val(val2);
                    }
                });
            });
        })
    };
    //default
    $.fn.areapicker.defaults = {
        title  : '区域选择',
        width  : 450,
        height : 200,
        maxChar: 10,
        data   : {}
    }
})(jQuery);